<!-- 左侧算法菜单 -->
<template>
  <item-panel class="item-panel">
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
          class="el-menu-vertical-demo"
          :unique-opened="true"
          @open="handleOpen"
          @close="handleClose"
        >
            <!-- index 用于完成：一级菜单打开，不加会出现全部一级菜单打开 -->
            <el-submenu v-for="(item, indexA) in nodeItems" :key="indexA" :index="String(indexA)" style="text-align:left;">
              <template slot="title" >
                <i class="el-icon-s-unfold"/>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="(secItem, indexS) in item.algorithm">
                <item
                  :key="indexS"
                  :type="secItem.type || 'node'"
                  :size="secItem.size || '95*35'"
                  :shape="secItem.shape || 'flow-rect'"
                  :model="{
                  // must have model property
                  label: secItem.model.label || '节点',
                  color: secItem.model.color || '#1890FF',
                  flag: secItem.model.flag || false,
                  // 节点是否已执行过，true意味着可以获取节点的输出信息
                  executed: secItem.model.executed || false,
                  ...secItem.model
                }"
                >
                  <!--flag标记是判断节点是否已经有边进行了连接-->
                  <!--因为所有节点的属性不一定全部都相同，...secItem.model的作用是其余节点没有的属性会自动补全-->
                  <el-menu-item :index="secItem.model.num">
                    <template slot="title">
                      <i class="el-icon-menu"/>
                      <span> {{ secItem.model.label }}</span>
                    </template>
                  </el-menu-item>
                </item>
              </template>
            </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </item-panel>
</template>

<script>
import { Item, ItemPanel } from 'vue-flowchart-editor'

export default {
  name: 'AlgorithmCategoryPanel',
  components: { ItemPanel, Item },
  props: {
    // all nodes for drag to generate flowchart
    nodeItems: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less">
  .item-panel {
    box-sizing: border-box;
    position: fixed;
    top: 5px;
    bottom: 0;
    left: 0;
    width: 150px;
    /*padding: 10px;*/
    text-align: center;
    overflow-y: auto;
    -webkit-user-select: none; //添加文字，不可选中，防止拖动元素组件时，选中其它组件文字
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
      user-select: none;

      &.item-flow-rect {
        width: 100px;
        height: 50px;
        border: 1px solid rgb(24, 144, 255);
        background-color: rgba(24, 144, 255, 0.2);
      }

      &.item-flow-circle {
        width: 70px;
        height: 70px;
        border-radius: 60px;
        border: 1px solid rgb(250, 140, 22);
        background-color: rgba(250, 140, 22, 0.2);
      }

      &.item-flow-rhombus {
        width: 70px;
        height: 70px;
        margin: 25px auto;
        border: 1px solid rgb(19, 194, 194);
        background-color: rgba(19, 194, 194, 0.2);
        transform: rotate(45deg);

        span {
          transform: rotate(-45deg);
        }
      }

      &.item-img {
        max-width: 100px;
      }
    }
  }
</style>
